<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/doctor" is-telescreen />

    <main-content>
      <n-space v-if="state==0" vertical class="w-3/5 mt-4">
        <div class="flex justify-center">
          <n-button type="primary">
            搜索流程
          </n-button>
          <n-input v-model:value="ProcessRef.pId" placeholder="输入病人姓名或身份证号">
            <template #suffix>
              <n-icon :component="Search" />
            </template>
          </n-input>
        </div>
        <n-data-table size="large"
                      :columns="columns"
                      :data="data"
                      :pagination="pagination"
                      :single-line="false"
        />
      </n-space>
      <div v-if="state==1" class="w-3/5 flex justify-center relative" style="box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
                  background-color: white;overflow: auto;border-radius: 5px;"
      >
        <n-button type="primary" class="mt-2 right-8 absolute" @click="state=0">返回</n-button>
        <n-space vertical class="mt-12">
          <n-steps vertical :current="(current as number)" :status="currentStatus">
            <n-step v-for="(item,i) in ProcessRef.items" :key="i" :title="item.name" style="max-width: 50vw;">
              <strong>医生:</strong> {{ item.doctor }}
              <strong>地点:</strong> {{ item.therapyAddress }}
              <strong>日期:</strong> {{ ProcessRef.startTime }}
              <strong>间隔时间:</strong> {{ item.intervalTime }}
            </n-step>
          </n-steps>
        </n-space>
      </div>
      <n-space v-if="state==2" vertical class="w-3/5">
        <div class="text-xl ">选择病人</div>
        <div class="flex justify-center">
          <n-button type="primary">
            搜索
          </n-button>
          <n-input v-model:value="ProcessRef.pId" placeholder="输入姓名或身份证号">
            <template #suffix>
              <n-icon :component="Search" />
            </template>
          </n-input>
        </div>
        <div>
          <n-date-picker v-model:value="pStartTime" placeholder="治疗日期" />
        </div>
        <div v-for="(item,i) in ProcessRef.items" :key="i" class="mt-8">
          <div class="flex justify-between items-center">
            <div class="text-xl ">治疗项目{{ i+1 }}</div>
            <div class="flex justify-center">
              <div class=" mr-4 animal" @click="upItem(i)">上移</div>
              <div class=" mr-4 animal" @click="downItem(i)">下移</div>
              <div class=" mr-4 animal" @click="deleteItem(i)">删除</div>
            </div>
          </div>
          <div>
            <n-input v-model:value="item.name" placeholder="项目名" />
            <n-input v-model:value="item.doctor" placeholder="治疗地点" />
            <n-input v-model:value="item.intervalTime" placeholder="间隔时间">
              <template #suffix>
                分钟
              </template>
            </n-input>
          </div>
        </div>
        <div class="flex justify-end mt-4">
          <n-button class="text-white mr-4" type="primary" @click="addItem">新增项目</n-button>
          <n-button class="text-white mr-4" type="primary" @click="confirm">保存</n-button>
        </div>
      </n-space>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>

import { ref, h, reactive, onMounted } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, NIcon, NInput, NButton, NDataTable, NSpace, NDatePicker, NStep, NSteps, StepsProps } from 'naive-ui'
import { Search } from '@vicons/ionicons5'
import type { DataTableColumns } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { timestampToDate, transStatus } from '../patient/patient.def'
import { ProcessRefType, ItemRefType } from './doctor.def'

const state = ref<number>(0)

// 展示流程具体项目
const pStartTime = ref<any>(null)
const ProcessRef = reactive<ProcessRefType>({
  pId: '',
  startTime: '',
  items: [{
    num: 0,
    name: '',
    doctor: '',
    status: 1,
    intervalTime: '',
    therapyAddress: ''
  }]
})

const itemModel: ItemRefType = {
  num: 0,
  name: '',
  doctor: '',
  status: 1,
  intervalTime: '',
  therapyAddress: ''
}

// 展示流程具体项目end

//展示流程简略信息
type RowData = {
  key: number
  name: string
  cardId: string
  startTime: string
}

const buttons = [
  { label:'更多', type:'primary' },
  { label:'修改', type:'success' }
]

const createColumns = ({
  operate
}: {
  operate: (event,rowData: RowData) => void
}): DataTableColumns<RowData> => {
  return [
    {
      title: '病人姓名',
      key: 'name'
    },
    {
      title: '身份证号',
      key: 'cardId'
    },
    {
      title: '治疗时间',
      key: 'startTime'
    },
    {
      title: '操作',
      key: 'actions',
      render (row) {
        return buttons.map((item, index) => (
          h(
            NButton,
            {
              type: item.type,
              size: 'small',
              class: 'mr-2',
              key: index, // 添加唯一的 key，通常使用数组索引作为 key
              onClick: () => operate(event,row),
            },
            { default: () => item.label },
          )
        ))
      }
    }
  ]
}

const createData = (): RowData[] => [
  {
    key: 0,
    name: 'John Brown',
    cardId: '441',
    startTime: timestampToDate(1716739200000)
  },
  {
    key: 1,
    name: 'Jim Green',
    cardId: '881',
    startTime: timestampToDate(1716739200000)
  },
  {
    key: 2,
    name: 'Joe Black',
    cardId: '2342',
    startTime: timestampToDate(1716739200000)
  }
]

const data = createData()
const columns = createColumns({
  operate (event,rowData) {
    if (event.target.innerText === '更多') {
      state.value = 1
      // console.log(rowData)
    } else if(event.target.innerText === '修改') {
      state.value = 2
      // console.log(rowData)
    }
  }
})

const viewData = ref<RowData[]>(data)

const pagination = {
  pageSize: 10
}

//展示流程简略信息

function addItem() {
  ProcessRef.items.push(itemModel)
}

function upItem(index:number) {
  if(index == 0)
    return
  ProcessRef.items.splice(index - 1, 2, ProcessRef.items[index], ProcessRef.items[index - 1])
}

function downItem(index: number) {
  if (index < 0 || index >= ProcessRef.items.length - 1)
    return
  ProcessRef.items.splice(index, 2, ProcessRef.items[index + 1], ProcessRef.items[index])
}

function deleteItem(index: number) {
  if (index < 0 || index >= ProcessRef.items.length)
    return
  ProcessRef.items.splice(index, 1)
}

function confirm() {
  const data: ProcessRefType = {
    pId : ProcessRef.pId,
    startTime : ProcessRef.startTime,
    items : []
  }
  for(let i = 0;i < ProcessRef.items.length;i++) {
    const item = {
      num: i + 1,
      name: ProcessRef.items[i].name,
      doctor: ProcessRef.items[i].doctor,
      status: 1,
      intervalTime: ProcessRef.items[i].intervalTime,
      therapyAddress: ProcessRef.items[i].therapyAddress
    }
    data.items.push(item)
  }
  console.log(data)
}

const currentRef = ref<number | null>(1)
const currentStatus = ref<StepsProps['status']>('wait')
const current = currentRef

onMounted(() => {
  if(!import.meta.env.SSR) {
    ProcessRef.pId = '441881199905052002'
    ProcessRef.startTime = '2024/5/27',
    ProcessRef.items = [{
      num: 1,
      name: '不可言语的治疗1',
      doctor: '奇奇怪怪的医生',
      status: 3,
      intervalTime: '0.000001',
      therapyAddress : '东校区校医室102'
    },{
      num: 2,
      name: '不可言语的治疗2',
      doctor: '奇奇怪怪的医生',
      status: 3,
      intervalTime: '0.000001',
      therapyAddress : '东校区校医室102'
    },{
      num: 3,
      name: '不可言语的治疗3',
      doctor: '奇奇怪怪的医生',
      status: 3,
      intervalTime: '0.000001',
      therapyAddress : '东校区校医室102'
    },{
      num: 4,
      name: '不可言语的治疗4',
      doctor: '奇奇怪怪的医生',
      status: 3,
      intervalTime: '0.000001',
      therapyAddress : '东校区校医室102'
    },{
      num: 5,
      name: '不可言语的治疗5',
      doctor: '奇奇怪怪的医生',
      status: 3,
      intervalTime: '0.000001',
      therapyAddress : '东校区校医室102'
    }]

    for(let i = 0;i < ProcessRef.items.length;i++) {
      currentStatus.value = transStatus(ProcessRef.items[i].status)
      if(ProcessRef.items[i].status == 3 && i != ProcessRef.items.length - 1) {
        next()
      } else {
        return
      }
    }
  }
})
function next () {
  if (currentRef.value === null) currentRef.value = 1
  else if (currentRef.value >= ProcessRef.items.length) currentRef.value = null
  else currentRef.value = currentRef.value + 1
}
</script>

<style scoped>
.animal {
  cursor: pointer;
  transition: transform 0.3s;
}

.animal:hover {
    transform: scale(1.2); /* 鼠标悬停时放大 1.1 倍 */
}
</style>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
